<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        width:200px;
        height:200px;
        background-color:red;
    }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        //点击按钮一以后，修改box1的大小,即宽度和高度的像素

        //首先获取box1
        var box1=document.getElementById("box1");
        //为按钮绑定单击响应函数
        var btn01=document.getElementById("btn01");
        //给btn01绑定单击响应函数
        btn01.onclick=function()
        {
            //修改box1的宽度
            //通过JS修改元素的央视
            //语法 元素.style.样式名=样式值
            //如果css的样式名中含有-，这种名称在JS中是不合法的
            //修改方法是去掉-，并且后面的第一个字母大写
            box1.style.width="300px";//修改宽度
            box1.style.height="300px";//修改高度
            box1.style.backgroundColor="yellow";

            //通过style属性设置的样式都是内联样式
            //内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
            //如果在样式中写了!important，这此时样式会有最高的优先级
            //即使通过JS也不能覆盖样式，此时将会导致JS修改样式失败

        };

        //点击按钮二以后，读取元素的样式
        var btn02=document.getElementById("btn02");
        btn02.onclick=function()
        {
            console.log(box1.style.width);
            console.log(box1.style.height);
            console.log(box1.style.backgroundColor);
            //通过style属性设置和读取的都是内联样式
            //无法读取样式表中的样式
            //所以需要先点击摁钮一，然后才能顺利读取
        }
    }
    </script>
</head>
<body>
    <button id="btn01">按钮一</button>
    <button id="btn02">按钮二</button>
    <br><br>
    <div id="box1"></div>
</body>
</html>